<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门案例</title>
	</head>
	<body>
		<div id="app">
			<h1>实现路由案例</h1>
			<!-- 2.定义路由标签
			 1-a标签1说明
			 标签说明:a标签 超链接标签
			 href属性:请求跳转的地址
			 <a href="http://www.baidu.com">百度</a>
			 
			 2-路由标签说明
			 router-link 解析为a标签
			 to 解析之后变成 href属性
			 -->
			 <router-link to="/home">主页</router-link>
			 <!-- 3.指定路由填充位(占位符)
			  需要给组件一个展现的位置,需要提前定义
			  -->
			  <router-view></router-view>
		</div>
		<!-- 1.引入JS路由需要依赖vue 注意顺序 -->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		
		<script>
			<!-- 4.封装路由对象 -->
			let HomeCom = {
				temolate: "#homeTem"
				}
			
			let router = new VueRouter({
				routes:: [
					{path: "/home",component: HomeCom}
				]
			})
			<!-- 5.实现路由对象的绑定 -->
			const app = new Vue({
				el: "#app",
				// router: router
				router
			})
		</script>
	</body>
</html>
